<page-header-wrapper [title]="'产品规格'">
  <nz-card [nzBordered]="false" class>
    <!-- serch begin -->
    <form nz-form [nzLayout]="'inline'" (ngSubmit)="serchData()" class="search__form">
      <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
        <div nz-col nzMd="8" nzSm="24">
          <nz-form-item>
            <nz-form-label nzFor="text">产品名称</nz-form-label>
            <nz-form-control>
              <input nz-input [(ngModel)]="query.condition.text" name="text" placeholder="请输入" id="text">
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzMd="8" nzSm="24">
          <nz-form-item>
            <nz-form-label nzFor="status">状态</nz-form-label>
            <nz-form-control>
              <nz-select [(ngModel)]="query.condition.status" name="status" id="status" [nzPlaceHolder]="'请选择'"
                [nzShowSearch]="true">
                <nz-option nzValue="关闭" nzLabel="关闭"></nz-option>
                <nz-option nzValue="启用" nzLabel="启用"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
          <nz-form-item>
            <nz-form-label nzFor="serialNum">排序</nz-form-label>
            <nz-form-control>
              <nz-input-number [(ngModel)]="query.condition.serialNum" name="serialNum" id="serialNum" [nzMin]="1"
                [nzMax]="100" [nzStep]="1" nzPlaceHolder="请输入数字"></nz-input-number>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="expandForm ? 24 : 8" [class.text-right]="expandForm">
          <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading">查询</button>
          <button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>
          <a (click)="expandForm = !expandForm">
            {{ expandForm ? '收起' : '展开' }}
            <i nz-icon [nzType]="expandForm ? 'up' : 'down'"></i>
          </a>
        </div>
      </div>
    </form>
    <!-- serch end -->

    <!-- button begin-->
    <button nz-button (click)="add()" [nzType]="'primary'">
      <i nz-icon nzType="plus"></i>
      <span>新建</span>
    </button>
    <button nz-button (click)="getData()" [nzType]="'primary'">
      <i nz-icon nzType="reload"></i>
      <span>刷新</span>
    </button>
    <ng-container *ngIf="selectedRows.length > 0">
      <button nz-button nz-dropdown [nzDropdownMenu]="batchMenu" nzPlacement="bottomLeft">
        更多操作
        <i nz-icon nzType="down"></i>
      </button>
      <nz-dropdown-menu #batchMenu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item (click)="batchDeleteConfirm()">批量删除</li>
        </ul>
      </nz-dropdown-menu>
    </ng-container>
    <div class="my-md">
      <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
        <ng-template #message>
          已选择
          <strong class="text-primary">{{ selectedRows.length }}</strong>
          项
          <a *ngIf="selectedRows.length > 0" (click)="st.clearCheck()" class="ml-lg">清空</a>
        </ng-template>
      </nz-alert>
    </div>
    <!-- button end-->

    <!-- table begin-->
    <st #st [columns]="columns" [data]="data" [pi]="query.pageNo" [ps]="query.pageSize" [page]="page.pageParam"
      [total]='page.total' [loading]="loading" (change)="stChange($event)">
    </st>
    <!-- table end-->

  </nz-card>

  <!-- model template begin-->
  <ng-template #modalContent>
    <form nz-form [formGroup]="form">
      <input nz-input formControlName="specificationId" hidden>
      <nz-row [nzGutter]="'4'">
        <nz-col>
          <nz-form-item>
            <nz-form-label nzFor="text">产品名称</nz-form-label>
            <nz-form-control nzErrorTip="请输入产品名称">
              <input nz-input formControlName="text" id="text" placeholder="请输入产品名称">
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
      <nz-row nzGutter="16">
        <nz-col nzMd="12">
          <nz-form-item>
            <nz-form-label nzFor="status">状态</nz-form-label>
            <nz-form-control nzErrorTip="请选择状态">
              <nz-select formControlName="status" id="status" nzAllowClear nzPlaceHolder="请选择状态">
                <nz-option nzValue="关闭" nzLabel="关闭"></nz-option>
                <nz-option nzValue="启用" nzLabel="启用"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </nz-col>

        <nz-col nzMd="12">
          <nz-form-item>
            <nz-form-label nzFor="serialNum">排序（数值越低，排名越前）</nz-form-label>
            <nz-form-control nzErrorTip="请输入数字">
              <nz-input-number formControlName="serialNum" id="serialNum" [nzMin]="1" [nzMax]="100" [nzStep]="1"
                nzPlaceHolder="请输入数字"></nz-input-number>
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
    </form>
  </ng-template>
  <!-- model template end-->

</page-header-wrapper>
